<template>
	<view class="content">
		<!-- 切换页面加载中 -->
		<view v-show="loadingShow" class="cd-cart-loading-area">
			<u-loading-icon :duration="1000" :show="loadingShow" textColor="#fff" textSize="28rpx" :vertical="true" mode="circle" text="请先登录..."></u-loading-icon>
		</view>
		<!-- {{cartList}}---{{cartTotal}} -->
		<!-- 购物车顶部 -->
		<view class="cd-cart-top">
			<view class="cd-cart-top-item">
				<view class="cd-cart-top-item-icon"><u-icon name="checkbox-mark" color="#fff" size="8"></u-icon></view>
				<view class="cd-cart-top-item-text">30天无忧退货</view>
			</view>
			<view class="cd-cart-top-item">
				<view class="cd-cart-top-item-icon"><u-icon name="checkbox-mark" color="#fff" size="8"></u-icon></view>
				<view class="cd-cart-top-item-text">48小时快速退费</view>
			</view>
			<view class="cd-cart-top-item">
				<view class="cd-cart-top-item-icon"><u-icon name="checkbox-mark" color="#fff" size="8"></u-icon></view>
				<view class="cd-cart-top-item-text">满88元免邮费</view>
			</view>
		</view>
		<!-- 购物车内容 -->
		<view class="cd-cart-area">
			<u-checkbox-group v-model="checkboxItemList" placement="column" @change="checkboxChange">
				<view class="cd-cart-area-item" v-for="(item, index) in cartList" :key="item.id">
					<!-- 复选框 -->
					<view class="cd-cart-area-item-radio">
						<u-checkbox @change="goodsChange(index)" :disabled="tempShow" :customStyle="{ marginBottom: '8px' }" shape="circle" :name="index"></u-checkbox>
					</view>
					<!-- 内容 -->
					<!--滑动 删除 -->
					<u-swipe-action>
						<u-swipe-action-item :options="options1" @click="click(index)">
							<view class="cd-cart-area-item-main">
								<!-- 内容图片 -->
								<view class="cd-cart-area-item-main-left">
									<view class="cd-cart-area-item-main-left-img"><image :src="item.list_pic_url" mode="widthFix"></image></view>
									<view class="cd-cart-area-item-main-right-text">
										<!-- 标题 -->
										<view class="cd-cart-area-item-main-right-text-title">{{ item.goods_name }}</view>
										<!-- 价格和数量 -->
										<view class="cd-cart-area-item-main-right-text-priceAndcount">
											<view class="cd-cart-area-item-main-right-text-priceAndcount-price">
												<text class="cd-cart-area-item-main-right-text-priceAndcount-price-RGB">￥</text>
												{{ item.market_price }}
												<text class="cd-cart-area-item-main-right-text-priceAndcount-price-RGB">.00</text>
											</view>
											<view class="cd-cart-area-item-main-right-text-priceAndcount-countAndtemp">
												<view class="cd-cart-area-item-main-right-text-priceAndcount-count">x{{ tempValue[index].number }}</view>
												<!-- 步进器 -->
												<view v-show="tempShow" class="cd-cart-area-item-main-right-text-priceAndcount-temp">
													<u-number-box
														:name="index"
														inputWidth="35"
														bgColor="#F2F3F5"
														integer
														v-model="tempValue[index].number"
														@change="tempValChange"
													></u-number-box>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</u-swipe-action-item>
					</u-swipe-action>
				</view>
			</u-checkbox-group>
		</view>
		<!-- 购物车总价 -->
		<view class="cd-cart-totalArea">
			<!-- 提示 -->
			<view class="cd-cart-totalArea-countTotal">
				累计共{{ cartTotal.goodsCount }}件商品，可点击
				<text @tap="tempShowChange" class="cd-cart-totalArea-countTotal-btn" v-show="!tempShow">编辑</text>
				<text @tap="tempShowChange" class="cd-cart-totalArea-countTotal-cbtn" v-show="tempShow">完成编辑</text>
				按钮进行商品数量修改
			</view>
			<view class="cd-cart-totalArea-priceTotal">
				<!-- 全选按钮 -->
				<view class="cd-cart-totalArea-priceTotal-checkAll">
					<u-checkbox-group v-model="checkAll1" placement="column" shape="circle" @change="checkAllChange">
						<u-checkbox :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in checkAllList" :key="index" :label="item.name" :name="item.name"></u-checkbox>
					</u-checkbox-group>

					<view class="cd-cart-totalArea-priceTotal-checkAll-text">全选</view>
				</view>
				<view class="cd-cart-totalArea-priceTotal-total">
					<text style="color: #000;font-size: 28rpx;">合计：</text>
					<text class="cd-cart-area-item-main-right-text-priceAndcount-price-RGB">￥</text>
					{{ total }}
					<text class="cd-cart-area-item-main-right-text-priceAndcount-price-RGB">.00</text>
				</view>
				<view class="cd-cart-totalArea-priceTotal-total-btn"><button>立即购买</button></view>
			</view>
		</view>
		<customTabBar></customTabBar>
	</view>
</template>

<script>
import customTabBar from '@/custom-tab-bar/index.vue';
import { isLogin } from '../../utils/units.js';
import { ApiCart, ApiCartCheck, ApiUpdate, ApiDelete } from '@/utils/api.js';
import { warn } from 'vue';
export default {
	data() {
		return {
			loadingShow: false,
			cartList: [],
			cartTotal: {},
			// 基本案列数据
			checkboxItemList: [],
			checkAllList: [
				{
					name: '',
					disabled: false
				}
			],
			checkAll: [],
			// 步进器
			tempValue: [],
			tempShow: false,
			// 滑动
			options1: [
				{
					text: '删除'
				}
			]
			// checkboxList1: [
			// 	{
			// 		name: '',
			// 		disabled: false
			// 	}
			// ],
			// radiovalue1: '0',
			// radiolist2: [
			// 	{
			// 		disabled: false
			// 	}
			// ]
		};
	},
	components: {
		customTabBar
	},
	computed: {
		checkAll1: {
			get() {
				if (this.checkAll.length !== 1) {
					return ['1'];
				} else {
					return [''];
				}
			},
			set(val) {
				this.checkboxItemList = this.cartList.map(item => val);
			}
		},
		// 总价
		total() {
			// console.log(this.cartList);
			return this.cartList.reduce((pre, cur) => {
				if (cur.checked == 1) {
					return pre + cur.market_price * cur.number;
				}
			}, 0);
		}
	},
	methods: {
		// 封装请求购物车数据方法
		async getCartList() {
			let token = uni.getStorageSync('token');
			// console.log(token);
			if (token) {
				let res = await ApiCart(token);
				if (!res) return;
				let { cartList, cartTotal } = res.data;
				this.cartList = cartList;
				this.cartTotal = cartTotal;
			}
			// 步进器
			this.cartList.forEach(item => {
				this.tempValue.push({
					number: item.number,
					goodsId: item.goods_id,
					id: item.id,
					productId: item.product_id
				});
			});
		},
		checkboxChange(n) {
			this.checkboxItemList = n;
			if (this.checkboxItemList.length == this.cartList.length) {
				this.checkAll.push('1');
			} else {
				this.checkAll = [];
			}
		},
		checkAllChange() {
			// this.checkboxItemList=this.checkboxItemList.map(item=>this.checkAll)
		},
		// 步进器
		async tempValChange(e) {
			let res = await ApiUpdate(this.cartList[e.name].goods_id, this.cartList[e.name].id, e.value, this.cartList[e.name].product_id);
		},
		tempShowChange() {
			this.tempShow = !this.tempShow;
		},
		// 删除
		async click(i) {
			let res = await ApiDelete(this.cartList[i].product_id);
			this.getCartList();
		},
		// 改变选中状态
		async goodsChange(i) {
			console.log('选中', i);
			if (this.cartList[i].checked == 0) {
				console.log(123);
				let res = await ApiCartCheck(1, this.cartList[i].product_id);
				console.log('res', res);
			} else {
				let res1 = await ApiCartCheck(0, this.cartList[i].product_id);
				console.log('res1', res1);
				console.log(456);
			}
		}
	},
	onShow() {
		// 切换tabbar
		this.$store.commit('changeTabbarIndex', 3);
		this.getCartList();

		// 切换到购物车时判断有没有登录
		if (!isLogin()) {
			// console.log("请先登录");
			this.loadingShow = true;
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/user/user'
				});
			}, 1000);
		}
	}
};
</script>

<style lang="scss">
// 页面加载
.content {
	background-color: #fff;
}
.cd-cart-loading-area {
	background-color: rgba(0, 0, 0, 0.7);
	width: 176rpx;
	max-width: 70%;
	min-height: 176rpx;
	margin: auto;
	padding: 32rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 20rpx;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
// 购物车顶部
.cd-cart-top {
	display: flex;
	justify-content: space-between;
	height: 30rpx;
	align-items: center;
	background-color: #eee;
	padding: 16rpx;
	.cd-cart-top-item {
		display: flex;
		justify-content: space-between;
		.cd-cart-top-item-icon {
			background-color: #711e00;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50px;
			padding: 2rpx 2rpx;
			width: 18rpx;
			height: 18rpx;
			margin-right: 8rpx;
			margin-top: 6rpx;
		}
		.cd-cart-top-item-text {
			font-size: 26rpx;
		}
	}
}
// 购物车列表
.cd-cart-area {
	background-color: #fff;
	padding: 0;
	margin: 0 20rpx;
	.cd-cart-area-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		box-sizing: border-box;
		border-bottom: 1px solid gray;
		.cd-cart-area-item-radio {
			text-align: center;
		}
		.cd-cart-area-item-main {
			background-color: #fafafa;
			box-sizing: border-box;
			// width: 92%;
			.cd-cart-area-item-main-left {
				.cd-cart-area-item-main-left-img {
					float: left;
					image {
						width: 176rpx;
						height: 176rpx;
					}
				}
			}

			.cd-cart-area-item-main-right-text {
				padding: 10rpx 40rpx 10rpx 0;
				// background-color: #fac;
				box-sizing: border-box;
				.cd-cart-area-item-main-right-text-title {
					margin-top: -20rpx;
					height: 100rpx;
					line-height: 100rpx;
				}
				.cd-cart-area-item-main-right-text-priceAndcount {
					display: flex;
					justify-content: space-between;
					margin-top: 20rpx;

					// align-items: center;
					.cd-cart-area-item-main-right-text-priceAndcount-price {
						.cd-cart-area-item-main-right-text-priceAndcount-price-RGB {
							font-size: 20rpx;
						}
					}
					.cd-cart-area-item-main-right-text-priceAndcount-countAndtemp {
						position: relative;
						.cd-cart-area-item-main-right-text-priceAndcount-temp {
							padding: 40rpx 0 20rpx 0;
							// background-color: #07c160;
						}
						.cd-cart-area-item-main-right-text-priceAndcount-count {
							font-size: 22rpx;
							color: gray;
							right: 0;
							position: absolute;
						}
					}
				}
			}
		}
	}
}
// 总价
.cd-cart-totalArea {
	position: fixed;
	bottom: 100rpx;
	.cd-cart-totalArea-countTotal {
		background-color: #fff7cc;
		font-size: 24rpx;
		padding: 16rpx 24rpx;
		width: 750rpx;
		color: #f56723;
		line-height: 2.5;
		box-sizing: border-box;
		.cd-cart-totalArea-countTotal-btn {
			width: 84rpx;
			height: 64rpx;
			background-color: #07c160;
			display: inline-block;
			text-align: center;
			color: #fff;
			border-radius: 4rpx;
			margin: 0 6rpx;
		}
		.cd-cart-totalArea-countTotal-cbtn {
			// width: 84rpx;
			padding: 0 10rpx;
			height: 64rpx;
			background-color: red;
			display: inline-block;
			text-align: center;
			color: #fff;
			border-radius: 4rpx;
			margin: 0 6rpx;
		}
	}

	.cd-cart-totalArea-priceTotal {
		background-color: #fff;
		height: 100rpx;
		padding: 0 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.cd-cart-totalArea-priceTotal-checkAll {
			margin-top: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.cd-cart-totalArea-priceTotal-checkAll-text {
				font-size: 28rpx;
				margin-top: -10rpx;
			}
		}
		.cd-cart-totalArea-priceTotal-total {
			.cd-cart-area-item-main-right-text-priceAndcount-price-RGB {
				font-size: 26rpx;
			}
			color: red;
		}
		.cd-cart-totalArea-priceTotal-total-btn {
			height: 100rpx;
			line-height: 100rpx;
			button {
				background-color: red;
				color: #fff;
				border-radius: 50rpx;
				padding: 0 40rpx;
				font-size: 28rpx;
				margin-top: 10rpx;
			}
		}
	}
}
// 滑动
.u-swipe-action {
	width: 100%;
}
/deep/.u-swipe-action-item__content {
	width: 100%;
	background-color: #07c160;
}
/deep/.u-swipe-action-item__right__button__wrapper {
	background-color: red !important;
	padding: 0 20rpx !important;
	// width: 208rpx;
}
/deep/.u-tabbar__placeholder{
	background-color: #07c160;
	height: 0!important;
}
</style>
